<template>
    <div style="width: 100%; height: 100%;">
        <div>
            <div class="align-stretch tree-panel">
                <org-tree style="height: 100%;" @node-click="handleNodeClick" />
            </div>
            <div class=" app-container" style="margin-left: 270px;">
                <div class="pageTitle">
                    <div class="pageBtn" style="padding-left: 0;">
                        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd()">添加</el-button>
                    </div>
                </div>

                <page-main style="margin: 10px 10px 0 0;">
                    <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData"
                              header-cell-class-name="table-header" style="width: 100%;" border :row-class-name="tableRowClassName">
                        <el-table-column label="监控点名称" prop="name" />
                        <el-table-column label="监控点类型" width="120" align="center">
                            <template slot-scope="scope">
                                <remote-dict-label dict="camera_type" :value="scope.row.camera_type" />
                            </template>
                        </el-table-column>
                        <el-table-column label="IP地址" prop="network_addr" />
                        <el-table-column label="端口号" width="80" prop="network_port" />
                        <el-table-column label="用户名" width="120" prop="user_name" />
                        <el-table-column label="密码" width="120" prop="user_pwd" />

                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" icon="el-icon-edit" style="margin-right: 10px;" @click="handleEdit(scope.row)">修改</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </page-main>
            </div>
        </div>

        <el-dialog :title="currentCamera.isNew?'添加监控点':'修改监控点'" :visible.sync="detailVisible" width="700px">
            <el-form ref="form" :model="currentCamera" :rules="rules" label-width="120px" size="small">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="所属组织机构">
                            <span style="font-weight: bold;">{{ currentNode && currentNode.name }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="监控点名称" prop="name">
                            <el-input v-model="currentCamera.name" placeholder="请输入路口名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="监控点类型" prop="camera_type">
                            <remote-dict-select v-model="currentCamera.camera_type" dict="camera_type" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="IP地址" prop="network_addr">
                            <el-input v-model="currentCamera.network_addr" placeholder="请输入IP地址" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="端口号" prop="network_port">
                            <el-input-number v-model="currentCamera.network_port" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户名" prop="user_name">
                            <el-input v-model="currentCamera.user_name" placeholder="请输入用户名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="密码" prop="user_pwd">
                            <el-input v-model="currentCamera.user_pwd" placeholder="请输入密码" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="detailVisible = false">取 消</el-button>
                <el-button size="small" :loading="isLoading" type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment';
import OrgTree from './OrgTree';
import RemoteDictSelect from '@/modules/components/DictSelect/RemoteDictSelect';
import RemoteDictLabel from '@/modules/components/DictSelect/RemoteDictLabel';

import {
    MonitoringPoint, InsertCMonitoringPoint,
    UpdateMonitoringPoint
} from '@/api/resourceManageApi';

export default {
    name: 'camera-config',
    components: {
        OrgTree, RemoteDictSelect, RemoteDictLabel
    },
    filters: {

    },
    props: {},
    data() {
        return {
            isLoading: false,
            tableData: [],
            detailVisible: false,
            currentCamera: {},
            rules: {
                name: [
                    { required: true, message: '名称不能为空', trigger: 'blur' }
                ],
                network_addr: [
                    { required: true, message: 'IP地址不能为空', trigger: 'blur' }
                ],
                camera_type: [
                    { required: true, message: '类型不能为空', trigger: 'change' }
                ],
                user_name: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' }
                ],
                user_pwd: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                network_port: [
                    { required: true, message: '端口号不能为空', trigger: 'blur' }
                ]
            },
            monitoringOptions: [],
            crossingOptions: [],
            currentNode: null
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.loadRemoteData();
    },
    methods: {
        moment,
        tableRowClassName({row, rowIndex}) {
            if (this.detailVisible && this.currentCamera.camera_id == row.camera_id) {
                return 'selected-row';
            }
            return '';
        },
        handleNodeClick(data) {
            this.currentNode = data;
            this.loadRemoteData();
        },
        loadRemoteData() {
            if (!this.currentNode) {
                return;
            }

            this.isLoading = true;
            let params = {control_unit_id: this.currentNode.control_unit_id};
            MonitoringPoint(params).then(res => {
                this.isLoading = false;
                let result = res.res.MonitoringPoint;
                result.map(item => {
                    item.camera_type = item.camera_type.toString();
                });
                this.tableData = result;
            }).catch(err => {
                this.isLoading = false;
                console.log(err);
            });
        },
        handleAdd() {

            if (!this.currentNode) {
                this.$message.warning('请先选择组织');
                return;
            }

            this.currentCamera = {
                network_port: '',
                isNew: true
            };

            this.detailVisible = true;
            this.$nextTick(() => {
                this.$refs['form'] && this.$refs['form'].clearValidate();
            });
        },
        handleEdit(item) {
            this.currentCamera = {...item};
            this.detailVisible = true;
            this.$nextTick(() => {
                this.$refs['form'] && this.$refs['form'].clearValidate();
            });
        },
        handleSubmit() {
            if (this.clickTooFast()) return;
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.isLoading = true;

                    this.currentCamera.control_unit_id = this.currentNode.control_unit_id;
                    if (this.currentCamera.isNew) {
                        InsertCMonitoringPoint(this.currentCamera).then(res => {
                            this.$message.success('添加成功');
                            this.loadRemoteData();
                            this.detailVisible = false;
                            this.isLoading = false;
                        }).catch(err => {
                            this.isLoading = false;
                            console.log(err);
                        });
                    } else {
                        UpdateMonitoringPoint(this.currentCamera).then(res => {
                            this.$message.success('修改成功');
                            this.loadRemoteData();
                            this.detailVisible = false;
                            this.isLoading = false;
                        }).catch(err => {
                            this.isLoading = false;
                            console.log(err);
                        });
                    }
                }
            });
        }

    }
};
</script>

<style scoped>

.table-header {
    background-color: #f8f8f8 !important;
}
/deep/
.el-table td {
    padding: 5px 0 !important;
}
/deep/
.el-button--text {
    padding: 5px 0;
}
/deep/
.el-dialog__body {
    padding: 10px 20px;
}
/deep/
.el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #dcdfe6;
}
</style>

<style lang="scss" scoped>

.table-header {
    background-color: #f8f8f8 !important;
}
.el-table ::v-deep td {
    padding: 5px 0 !important;
}
.tree-panel {
    margin-left: var(--real-sidebar-width);
    height: calc(100% - 120px);
    position: fixed;
    z-index: 100;
    left: 0;
    width: 260px;
    padding-left: 5px;
    padding-top: 5px;
    background: #fbfbfb;
    border: 1px solid #e5e5e5;
    margin-right: 10px;
}
</style>
